<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
  <title>ZOL注册</title>
  <style>
    body {
      background: #F5F5F7;
    }
    h2,ul,li {
      margin: 0;
      padding: 0;
      font-weight: normal;
      list-style: none;
    }
    .content-padding {
      padding: 10px;
      position: relative;
    }
    h2 {
      padding-bottom: 20px;
    }
    li {
      height: 50px;
      margin-bottom: 10px;
    }
    li input {
      width: 100%;
      height: 50px;
      padding: 0 10px;
      box-sizing: border-box;
      box-shadow: none;
      outline: none;
      border-radius: 5px;
      border: 1px solid #EBEBED;
      text-shadow: none ;
      -webkit-appearance: none ;
      -webkit-user-select: text ;
    }
    .code-li {
      display: flex;
      position: relative;
    }
    button {
      background: #1898FF;
      border: none;
      color:#fff;
      padding: 5px 10px;
      outline: none;
    }
    .code-li button {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 90px;
      height: 30px;
    }
    .register-btn {
      width: 100%;
      height: 50px;
      border-radius: 5px;
      margin-top: 30px;
      font-size: 16px;
    }
    button:disabled {
      opacity: 0.5;
    }
    .xieyi-box {
      margin-top: 15px;
    }
    label {
      display: flex;
      align-items: center;
    }
    input[type='checkbox'] {
      margin-right:5px;
    }
    .xieyi-box a {
      color: #1898FF;
    }
    .download-box {
      /*border: 1px solid red;*/
      /*position: absolute;*/
      /*right: 10px;*/
      /*top: 10px;*/
    }
    .download-box a {
      display: block;
      background: #1898FF;
      margin-bottom: 5px;
      padding: 5px 10px;
      text-decoration: none;
      color: #fff;
      border-radius: 5px;
    }
    .title-box {
      display: flex;
      padding: 20px 0;
      align-items: center;
      justify-content: space-between;
    }
    .title-box img {
      width: 70px;
    }
    .title-box > div:first-child {
      display:flex;
      align-items: center;
    }
    .title-box > div:first-child > div {
      margin-right: 10px;
    }
    .title-box p {
      margin: 0;
      font-size: 14px;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    $(function () {
      var xieyiCheckbox = $('#xieyiCheckbox');
      var regBtn = $('#regBtn');
      var smsBtn = $('#smsBtn');
      //操作协议
      xieyiCheckbox.change(function (v) {
        regBtn.attr('disabled', !$(this)[0].checked)
      })
      // 发送验证码
      smsBtn.click(function () {
        var count = 11;
        smsBtn.attr('disabled', true);
        var timeId = setInterval(function() {
          count--;
          console.log(count)
          if (count === 0) {
            smsBtn.html('发送验证码');
            smsBtn.attr('disabled', false);
            clearInterval(timeId);
            return;
          }
          if (count < 10) {
            smsBtn.html('0'+count);
          } else {
            smsBtn.html(count);
          }
        }, 1000)
      })
      regBtn.click(function () {
        var inputs = $('ul input');
        var obj = {}
        inputs.each((index, item) => {
          // console.log($(item).data('key'))
          // console.log($(item).val())
          obj[$(item).data('key')] = $(item).val();
        })
        console.log(obj);
        $.ajax({
          url: 'http://192.168.50.7/Home/Reg/reg',
          type: 'POST',
          data: obj,
          success: function () {
            console.log('注册成功');
          }
        })
      })
    })
  </script>
</head>
<body>
  <div class="content-padding">
    <!--<h2>注册</h2>-->
    <div class="title-box">
     <div>
       <div>
         <img src="./src/static/logo2.png" alt="">
         <p>零极ZOL</p>
       </div>
       账户注册
     </div>

      <div class="download-box">
        <a href="javascript:;">iOS下载</a>
        <a href="https://fir.im/r7hp" target="_blank">安卓下载</a>
      </div>
    </div>

    <ul>
      <li>
        <input type="tel" id="abc" placeholder="请输入手机号" data-key="phone">
      </li>
      <li class="code-li">
        <input type="number" placeholder="请输入验证码" data-key="phone_code">
        <button id="smsBtn">发送验证码</button>
      </li>
      <li>
        <input type="password" placeholder="请输入密码" data-key="pwd">
      </li>
      <li>
        <input type="password" placeholder="请再次输入密码" data-key="pwd2">
      </li>
      <li>
        <input type="password" placeholder="请输入交易密码" data-key="twopwd">
      </li>
      <li>
        <input type="password" placeholder="请再次输入交易密码" data-key="twopwd2">
      </li>
      <li>
        <input type="text" placeholder="请输入邀请码" data-key="invit_code">
      </li>
    </ul>
    <button class="register-btn" id="regBtn">注册</button>
    <div class="xieyi-box">
      <label>
        <input type="checkbox" checked="checked" style="width:20px;height:20px;" id="xieyiCheckbox"/>
        注册即视为同意
        <a>《用户使用协议及隐私政策》</a>
      </label>
    </div>
  </div>
</body>
</html>
